<template>
  <div class="work-type" :class="className()">{{props.type}}</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  type: string
}>()

const className = () => {
  let colorName = ""
  switch(props.type){
    case "进行中":
      colorName = 'yellow';
      break;
    case "已完成":
      colorName = 'green';
      break;
    case "已办结":
      colorName = 'green';
      break;
    case "已终止":
      colorName = 'gray';
      break;
    case "超期":
      colorName = 'red';
      break;
  }
  return colorName
}

</script>

<style lang="less" scoped>
.work-type{
  display: inline-block;
  height: 20px;
  padding: 0 10px;
  line-height: 20px;
  background: #ff99281f;
  border-radius: 2px;
  color: #FF9928;
  font-weight: bold;
  font-size: 12px;
  margin-right: 6px;
  &.yellow{
    color: #FF9928;
    background: #FF99281f;
  }
  &.green{
    color: #26D088;
    background: #26D0881f;
  }
  &.gray{
    color: #979797;
    background: #9797971f;
  }
  &.red{
    color: #FF4935;
    background: #FF49351f;
  }
}
</style>
